<template>
  <div class="carousel2" @mouseenter="move = true" @mouseleave="move = false">
    <div class="container">
      <div v-fade-in class="carousel-title">天启明通·致力于成为卓越的智慧城市服务商</div>
      <M-button v-slide-up @click="handleDetail" />
      <div v-if="data?.length > 0" v-slide-up class="carousel2-bottom">
        <div class="bottom-center" :style="{ '--width': move ? '100%' : '0' }">
          <div
            v-for="(item, index) in data"
            :key="item.id"
            class="bottom-item"
            :class="{
              'bottom-down': index % 2 === 0 && move,
              'bottom-up': index % 2 !== 0 && move,
            }"
          >
            <div class="bottom-item-value">
              <Count-to :end="item.value" /><span>{{ item.unit }}</span>
            </div>
            <div class="bottom-item-label">{{ item.title }}</div>
          </div>
        </div>
      </div>
    </div>
    <Particle-wave color="#fff" />
  </div>
</template>
<script lang="ts" setup>
const router = useRouter();
defineProps({
  data: {
    type: Array as PropType<any[]>,
    default: () => [],
  },
});
const move = ref<boolean>(false);

onMounted(() => {
  setTimeout(() => {
    move.value = true;
  }, 500);
});

// 跳转详情
const handleDetail = () => {
  router.push("/pc/about");
};
</script>
<style lang="scss" scoped>
.carousel2 {
  width: 100%;
  height: 100vh;
  background: url("@/assets/home/carousel2.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  .container {
    position: relative;
    height: 100%;
    .carousel-title {
      position: absolute;
      left: 0;
      top: 214px;
      font-size: 60px;
      width: 65%;
      font-weight: 700;
      letter-spacing: 0px;
      line-height: 96px;
      color: #fff;
      z-index: 4;
    }
    .more-btn {
      position: absolute;
      left: 1px;
      top: 50%;
    }
  }
  &-bottom {
    position: absolute;
    bottom: 100px;
    width: 1200px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 4;
    .bottom-center {
      --width: 0;
      width: 100%;
      height: 228px;
      display: flex;
      align-items: center;
      position: relative;
      &::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: var(--width);
        height: 1px;
        background: rgba(255, 255, 255, 0.33);
        transition: all 1s;
        transition-delay: 0.3s;
      }
    }
    .bottom-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 114px;
      background: rgba(255, 255, 255, 0.15);
      border: 1px solid rgba(255, 255, 255, 0.33);
      transition: all 1s;

      &-value {
        font-size: 36px;
        font-weight: 700;
        line-height: 36px;
        color: #fff;
        span {
          font-size: 18px;
        }
      }
      &-label {
        font-size: 18px;
        line-height: 28px;
        color: #fff;
      }
    }
    .bottom-down {
      margin-top: 114px;
    }
    .bottom-up {
      margin-bottom: 115px;
    }
  }
}
</style>
